/*
* useState 是一个 React Hook，它允许你向组件添加一个 状态变量
* const [state, setState] = useState(initialState)
*参数
*    initialState：你希望 state 初始化的值。它可以是任何类型的值，但对于函数有特殊的行为。在初始渲染后，此参数将被忽略。
*    如果传递函数作为 initialState，则它将被视为 初始化函数。它应该是纯函数，不应该接受任何参数，并且应该返回一个任何类型的值。当初始化组件时，React 将调用你的初始化函数，并将其返回值存储为初始状态。请参见下面的示例。
*返回
*    useState 返回一个由两个值组成的数组：
*    当前的 state。在首次渲染时，它将与你传递的 initialState 相匹配。
*    set 函数，它可以让你将 state 更新为不同的值并触发重新渲染。
* */

import {useState} from "react";

function App() {
    const [count, setCount] = useState(0);
    const [user, setUser] = useState({name: "陶品奇", age: 23});
    const [array, setArray] = useState([1, 2, 3, 4, 5]);

    const changeCount = (e) => {
        setCount(count + 1);
    }

    const changeUser = () => {
        const newUser = {...user, name: "马云"}
        setUser(newUser)
    }

    const changeArray = () => {
        const filterArray = array.filter(item => item === 1)
        setArray(filterArray)
    }

    return (
        <div className="App">
            <h1 onClick={changeCount}>count的值:{count}</h1>
            <h1 onClick={changeUser}>user对象name的值:{user.name}</h1>
            {array.map((item, index) => <h1 key={index}>{item}</h1>)}
            <button onClick={changeArray}>修改数组</button>
        </div>
    );
}

export default App;
